<template>
  <div>
    <div class="border-b border-[#ECECEC] p-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[100px]">证件类型</div>
      <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop">
        <!-- text-[#c8c9cc] -->
        <div class="text-[14px]" :class="{ 'text-[#c8c9cc]': !edit }">
          {{ type ? type : "请选择证件类型" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="">
      <van-cell-group inset>
        <van-field
          v-if="form.invoice_type"
          v-model="form.invoice_name"
          :disabled="!edit"
          name="纳税人名称"
          label="纳税人名称"
          placeholder="请输入纳税人名称"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type"
          v-model="form.invoice_no"
          name="纳税人识别号"
          label="纳税人识别号"
          placeholder="请输入纳税人识别号"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type == 1"
          v-model="form.invoice_mobile"
          name="税务登记号码"
          label="税务登记号码"
          placeholder="请输入税务登记号码"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type == 1"
          v-model="form.invoice_bank"
          name="税务开户银行名称"
          label="税务开户银行名称"
          placeholder="请输入税务开户银行名称"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type == 1"
          v-model="form.invoice_bank_no"
          name="税务开户银行账号"
          label="税务开户银行账号"
          placeholder="请输入税务开户银行账号"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type == 1"
          v-model="form.invoice_address"
          name="税务登记地址"
          label="税务登记地址"
          placeholder="请输入税务登记地址"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type"
          v-model="form.name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type"
          v-model="form.mobile"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type"
          v-model="form.address"
          name="收件详细地址"
          label="收件详细地址"
          placeholder="请输入收件详细地址"
        />
        <van-field
          :disabled="!edit"
          v-if="form.invoice_type"
          v-model="form.invoice_email"
          name="发票电子邮箱"
          label="发票电子邮箱"
          placeholder="请输入发票电子邮箱"
        />
      </van-cell-group>
    </div>
  </div>
  <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
    <van-picker
      title="证件类型"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="show = false"
      :columns-field-names="{ text: 'label' }"
    />
  </van-popup>
</template>
<script setup lang="ts">
import { ref, defineProps, computed } from "vue";
const props = defineProps({
  form: {} as any,
  edit: { type: Boolean, default: false },
});
const columns = ref([
  {
    label: "不申请发票",
    value: 0,
  },
  {
    label: "申请专票",
    value: 1,
  },
  {
    label: "申请普票",
    value: 2,
  },
]);
const show = ref(false);
const type = computed(() => {
  if (props.form.invoice_type == 1) {
    return "申请专票";
  } else if (props.form.invoice_type == 2) {
    return "申请普票";
  }
  return "不申请发票";
});
//打开弹窗
const openPop = () => {
  show.value = true;
};
const onConfirm = (val: any) => {
  props.form.invoice_type = val.selectedIndexes[0];
  show.value = false;
};
</script>
